@extends('mainlayout')

@section('title','欢迎来到mall商城')

@section('username',$username)

@section('css')
    @parent
@endsection

@section('contents')

    <section class="flat-product-detail">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="flexslider">
                        <ul class="slides">
                            <!--5张缩略图-->
                            @foreach($alldetails as $alldetail)
                            <li data-thumb="{{asset($alldetail->thumb01file)}}">
                                <img src="{{asset($alldetail->thumb01file)}}" alt="image slider" />
                            </li>
                            <li data-thumb="{{asset($alldetail->thumb02file)}}">
                                <img src="{{asset($alldetail->thumb02file)}}" alt="image slider" />
                            </li>
                            <li data-thumb="{{asset($alldetail->thumb03file)}}">
                                <img src="{{asset($alldetail->thumb03file)}}" alt="image slider" />
                            </li>
                            <li data-thumb="{{asset($alldetail->thumb04file)}}">
                                <img src="{{asset($alldetail->thumb04file)}}" alt="image slider" />
                            </li>
                            <li data-thumb="{{asset($alldetail->thumb05file)}}">
                                <img src="{{asset($alldetail->thumb05file)}}" alt="image slider" />
                            </li>
                            @endforeach
                        </ul><!-- /.slides -->
                    </div><!-- /.flexslider -->
                </div><!-- /.col-md-6 -->
                <!--商品名称、价格等信息-->
                @foreach($productInfo as $item)
                <div class="col-md-6">
                    <div class="product-detail">
                        <div class="header-detail">
                            <h4 class="name">{{$item->name}}</h4>
                            <div class="category">
                                {{$item->summary}}
                            </div>
                            <div class="reviewed">
                                <div class="review">
                                    <div class="queue">
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                        <i class="fa fa-star" aria-hidden="true"></i>
                                    </div>
                                </div><!-- /.review -->
                                <div class="status-product">
                                    专业鉴定 <span>正品保证</span>
                                </div>
                            </div><!-- /.reviewed -->
                        </div><!-- /.header-detail -->
                        <div class="content-detail">
                            <div class="price">
                                <div class="sale">
                                    ￥{{$item->price}}
                                </div>
                            </div>
                            <div class="info-text">
                                {{$item->summary}}.这是一款非常好用的商品，它能为您的工作生活带来意想不到的惊喜和便捷.
                            </div>
                            <div class="product-id">
                                产品编号: <span class="id" id="pid">{{$item->pid}}</span>
                            </div>
                        </div><!-- /.content-detail -->
                        <div class="footer-detail">
                            <div class="box-cart style2">
                                <div class="btn-add-cart">
                                    <a href="#" title="" id="addcart"><img src="{{asset('images/icons/add-cart.png')}}" alt="">添加至购物车</a>
                                </div>
                                <div class="compare-wishlist">
                                    <button class='wish'>收藏</button>
                                </div>
                            </div><!-- /.box-cart -->
                        </div><!-- /.footer-detail -->
                    </div><!-- /.product-detail -->
                </div><!-- /.col-md-6 -->
                @endforeach
            </div><!-- /.row -->
        </div><!-- /.container -->
    </section><!-- /.flat-product-detail -->

    @foreach($alldetails as $alldetail)
    <!--商品详情介绍图片-->
    <section class="flat-product-content">
        <ul class="product-detail-bar">
            <li class="active">产品详情</li>
        </ul><!-- /.product-detail-bar -->
        <div class="container">
            <img src="{{asset($alldetail->contentfile)}}" alt="" />
        </div><!-- /.container -->
    </section><!-- /.flat-product-content -->
    @endforeach
@endsection



@section('js')
    @parent

    <!--添加收藏-->
    <script type="text/javascript">
        $('.wish').on("click",function () {
            //获取当前商品的pid（商品编号）
            var pid = $('span[id=pid]').text();

            //通过ajax的post方式传值
            $.ajax({
                type:'POST',
                url:'/addWish',
                data:{pid:pid,_token:"{{csrf_token()}}"},
                dataType:'json',
                success:function (data) {
                    //成功回调
                    if(data.status==0){
                        alert(data.msg);
                        $('.wish').text('已收藏');
                    }
                    if(data.status==1){
                        alert(data.msg);
                    }
                },
                error:function (xhr,status,error) {
                    //错误回调
                    console.log(xhr);
                    console.log(status);
                    console.log(error);
                }
            });
        });
    </script>

        <!--添加购物车-->
        <script type="text/javascript">
            $('#addcart').on("click",function () {
                //获取当前商品的pid（商品编号）
                var pid = $('span[id=pid]').text();

                //通过ajax的post方式传值
                $.ajax({
                    type:'POST',
                    url:'/addCart',
                    data:{pid:pid,_token:"{{csrf_token()}}"},
                    dataType:'json',
                    success:function (data) {
                        //成功回调
                        if(data.status==0){
                            alert(data.msg);
                            $('#addcart').text('已添加');
                        }
                        if(data.status==1){
                            alert(data.msg);
                        }
                    },
                    error:function (xhr,status,error) {
                        //错误回调
                        console.log(xhr);
                        console.log(status);
                        console.log(error);
                    }
                });
            });


    </script>
@endsection
